<!DOCTYPE html>
<html lang="zh">
<head>
    <!--TODO 乱码
    @see org.springframework.web.servlet.resource.DefaultServletHttpRequestHandler -> tomcat(ApplicationDispatcher)-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>JS点击百度地图获取坐标代码</title>

    <!-- css样式文件 -->
    <style type="text/css">
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
            overflow: hidden;
        }

        #allmap {
            height: 100%;
            width: 100%;
            overflow: hidden;
        }

        #r-result {
            width: 100%;
            font-size: 14px;
            position: absolute;
            top: 10px;
            left: 55px
        }
    </style>

</head>

<body>
<!-- 地图盒子 -->
<div id="allmap"></div>
<!-- 搜索显示框 -->
<div id="r-result">
    地址: <input id="cityName" type="text" style="width:100px; margin-right:10px;"/>
    <input type="button" value="搜索" onClick="theLocation()"/> 经度:
    <input type="text" id="lng"/> 纬度：
    <input type="text" id="lat"/>
    <button onClick="submit()">提交</button>

    <button onClick="window.parent.document.getElementById('iframeDiv').style.visibility='hidden'">关闭</button>
</div>
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=CGvphq8rTSK5Lwj1jPG4NKC192mVAlCL"></script>


<!-- 页面地图js方法 -->
<script type="text/javascript">
    // 在指定容器创建地图实例并设置最大最小缩放级别
    var map = new BMap.Map("allmap", {
        minZoom: 5,
        maxZoom: 19
    });

    // 初始化地图，设置中心点和显示级别
    map.centerAndZoom(new BMap.Point(120.215366, 30.254954), 13);

    // 开启鼠标滚轮缩放功能，仅对PC上有效
    map.enableScrollWheelZoom(true);

    // 将控件（平移缩放控件）添加到地图上
    map.addControl(new BMap.NavigationControl());

    // 为地图增加点击事件，为input赋值
    map.addEventListener("click", function (e) {
        document.getElementById('lat').value = e.point.lat;
        document.getElementById('lng').value = e.point.lng;

    });

    // 创建位置检索、周边检索和范围检索
    var local = new BMap.LocalSearch(map, {
        renderOptions: {
            map: map
        }
    });

    // 发起检索
    function theLocation() {
        var city = document.getElementById("cityName").value;
        if (city != "") {
            local.search(city);
        }
    };

    // 弹出经纬度
    function submit() {
        let lat = document.getElementById('lat');
        let lng = document.getElementById('lng');
        // alert("经度：" + lng.value + "\n" + "纬度：" + lat.value);
        window.parent.document.getElementById("longitude").value = lng.value;
        window.parent.document.getElementById("latitude").value = lat.value;
        close();
    };

    function close() {
        window.parent.document.getElementById("iframeDiv").style.visibility = "hidden";//显示
    };
</script>
</body>
</html>